<template>
  <view class="vip-container">
    <u-navbar
      :border-bottom="false"
      title="会员中心"
      title-color="#fff"
      back-icon-color="#fff"
      :background="backgroundColor"
      :custom-back="onBack"
    >
    </u-navbar>
    <view class="vip-top">
      <view class="user-wrap">
        <view class="img">
          <u-image
            width="100%"
            :height="220"
            src="@/pageUser/static/images/vip_card_top.png"
          ></u-image>
        </view>
        <view class="u-flex u-rela">
          <u-avatar :src="userInfo.avatar_url" size="128"></u-avatar>
          <view class="content">
            <view class="flex">
              <view class="name">{{ userInfo.nick_name }}</view>
              <u-image
                class="u-m-l-8"
                width="30rpx"
                height="26rpx"
                src="@/static/images/vip_icon.png"
                v-if="vipStatus == 1"
              ></u-image>
              <u-image
                class="u-m-l-8"
                width="30rpx"
                height="26rpx"
                src="@/static/images/vip_grey_icon.png"
                v-else-if="vipStatus == 2"
              ></u-image>
            </view>
            <view class="info" v-if="vipStatus == 0">开通会员获得更多权益</view>
            <view class="info" v-else-if="vipStatus == 1"
              >有效期至：{{ expireTime | timeFormat }}</view
            >
            <view class="info" v-else-if="vipStatus == 2">会员已过期</view>
          </view>
        </view>
      </view>
      <view class="user-grid">
        <view class="item">
          <u-image
            width="48rpx"
            height="48rpx"
            src="@/pageUser/static/images/vip_icon1.png"
          ></u-image>
          <text class="text">免费课程</text>
        </view>
        <view class="item">
          <u-image
            width="48rpx"
            height="48rpx"
            src="@/pageUser/static/images/vip_icon2.png"
          ></u-image>
          <text class="text">付费课程</text>
        </view>
        <view
          class="item"
          @click="
            $u.route('/pages/protocol', {
              key: 'mobileVip',
            })
          "
        >
          <u-image
            width="48rpx"
            height="48rpx"
            src="@/pageUser/static/images/vip_icon3.png"
          ></u-image>
          <view class="text">
            权益说明
            <u-icon name="question-circle"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="vip-bottom">
      <view class="vip-title">
        <view class="name" style="font-weight: bold">选择开通类型</view>
        <view class="btn" @click="$u.route('/pageUser/user/vipRecord')">
          <u-icon name="rmb-circle"></u-icon>
          充值记录
        </view>
      </view>
      <view class="vip-box">
        <scroll-view scroll-y="true" class="scroll">
          <view
            class="view"
            v-for="item in vipList"
            :class="{ active: current == item.id }"
            :key="item.id"
            @click="vipChange(item.id)"
          >
            <view class="name u-line-1">{{ item.title }}</view>
            <!-- #ifdef H5 -->
            <view class="cneter">
              <text class="price">{{ item.price | formatCurrency }}</text>
              <text class="del-price">{{ item.scribing_price | formatCurrency }}</text>
            </view>
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <view class="cneter">
              <text class="price">{{ item.price | formatCurrency }}</text>
              <text class="del-price">{{ item.scribing_price | formatCurrency }}</text>
            </view>
            <!-- #endif -->
            <view class="credit">{{ `赠送 ${item.give_credit}积分` }}</view>
          </view>
        </scroll-view>
      </view>
      <view class="vip-footer">
        <!-- #ifdef H5 -->
        <view class="btn" @click="submit">去支付</view>
        <!-- #endif -->

        <!-- #ifdef MP-WEIXIN -->
        <view class="btn" @click="submit">
          <view v-if="$edu.test.getSystemInfo()">去支付</view>
          <view v-else>去支付</view>
        </view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="btn" @click="submit">去支付</view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      backgroundColor: {
        backgroundColor: 'transparent',
      },
      keyword: '',
      vipStatus: -1,
      vipList: [],
      expireTime: '',
      current: 0,
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/getUserInfo',
    }),
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  onShow() {
    this.$edu.api.getUserVip().then((res) => {
      const { data } = res
      this.expireTime = data.expire_time
      this.vipStatus = data.vip_status
      this.vipList = data.vip
      let vipData = this.vipList.find((item, index) => index == 0)
      this.current = vipData.id
    })
  },
  methods: {
    // 兑换卡
    changeSearch() {
      if (this.$u.test.empty(this.keyword)) {
        this.$u.toast('请输入会员卡兑换码')
        return
      }
    },
    vipChange(id) {
      this.current = id
    },
    submit() {
      this.$edu.api
        .createUserVip({
          vip_id: this.current,
        })
        .then((res) => {
          const { data } = res
          this.$u.route('pages/pay', {
            no: data.order_no,
            payment: data.payment,
            redirect_type: 'vip',
          })
        })
        .catch((res) => {
          this.showPopup = false
          this.$u.toast(res.msg)
        })
    },
    // 返回上一页
    onBack() {
      this.$u.route({ type: 'switchTab', url: 'pages/user/index' })
    },
  },
}
</script>

<style lang="scss" scoped>
.vip-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url('@/pageUser/static/images/vip_top_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  padding-right: 10rpx;
  .content {
    flex: 1;
    padding: 0 28rpx;
    display: flex;
    height: 72rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 36px;
  }
  .action {
    padding: 20rpx;
    margin-left: 20rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
.vip-top {
  padding: 0 30rpx;
}
.user-wrap {
  margin-top: 15rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  height: 220rpx;
  position: relative;
  .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .content {
    flex: 1;
    color: #946a38;
    margin-left: 23rpx;
    .flex {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
    }
    .name {
      font-size: 28rpx;
      font-weight: 500;
    }
    .ifno {
      font-size: 26rpx;
      font-weight: 400;
    }
  }
}
.user-grid {
  margin-top: 32rpx;
  display: flex;
  justify-content: space-between;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .text {
      margin-top: 8rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
.vip-bottom {
  flex: 1;
  margin-top: 32rpx;
  background-color: #ffffff;
  border-radius: 50rpx 50rpx 0 0;
  padding: 0 30rpx;
}
.vip-title {
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .name {
    font-size: 32rpx;
    font-weight: 500;
    color: $edu-main-color;
  }
  .btn {
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-content-color;
    .u-icon {
      margin-right: 8rpx;
    }
  }
}
.vip-box {
  /* #ifdef H5 */
  height: calc(100vh - 690rpx);
  /* #endif */
  /* #ifdef MP-WEIXIN */
  height: calc(100vh - 734rpx);
  /* #endif */
  .scroll {
    height: 100%;
  }
  .view + .view {
    margin-top: 20rpx;
  }
  .view {
    display: flex;
    align-items: center;
    padding: 0 27rpx;
    height: 160rpx;
    border-radius: 20rpx;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    &.active {
      background-image: url('@/pageUser/static/images/card_pre.png');
      background-size: 100% 100%;
    }
    .name {
      width: 130rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #582f1d;
    }
    .cneter {
      margin-left: 10rpx;
    }
    .price {
      font-size: 48rpx;
      font-weight: bold;
      color: #582f1d;
    }
    .del-price {
      font-size: 28rpx;
      font-weight: 500;
      color: #a89377;
      text-decoration: line-through;
    }
    .credit {
      margin-left: auto;
      font-size: 26rpx;
      font-weight: 400;
      color: #582f1d;
    }
  }
}
.vip-footer {
  .btn {
    height: 104rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #946a38;
    line-height: 104rpx;
    text-align: center;
    background-image: url(@/pageUser/static/images/vip_tab_button.png);
    background-size: 100% 100%;
  }
}
</style>
